<template>
    <div class="content">
      <div class="content-head">
        <el-form :inline="true" :model="formData" label-position="left">
          <el-form-item>
            <el-button type="warning" size="mini" icon="el-icon-plus" @click="addEvent">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="content-table">
        <div class="table-main">
          <el-table :data="tableData" v-loading="tableLoading" style="width: 100%;" highlight-current-row :max-height="tableMaxHeight" class="content-table-item">
            <el-table-column type="index" align="center" label="序号" width="60"></el-table-column>
            <el-table-column prop="configCode" label="审批编号" align="center" width="150"></el-table-column>
            <el-table-column prop="configName" label="审批名称" align="center" width=""></el-table-column>
            <el-table-column prop="" label="业务类型" align="center" width="160">
              <template slot-scope="{ row, $index }">
                <span>{{ row.businessType == 'PURCHASE_ORDER' ? '采购需求订单' : row.businessType }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="" label="状态" align="center" width="">
              <template slot-scope="{ row, $index }">
                <div class="status-item">
                  <div class="item-left-icon" :class="'status' + row.state"></div>
                  <div class="item-right-text">{{ row.state == 0 ? '创建' : row.state ==  1 ? '生效' : row.state == 2 ? '完成' : row.state }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="createdDate" label="创建时间" align="center" width="150"></el-table-column>
            <el-table-column prop="" label="操作" align="center" width="150">
                <template slot-scope="{ row, $index }">
                    <el-button type="text" size="mini" @click="examineEvent(row.id)">查看</el-button>
                    <el-button type="text" size="mini" style="margin-right:10px;" :disabled="row.state == 1" @click="editEvent(row.id)">编辑</el-button>
                    <el-popconfirm title="确定删除吗？" @confirm="deleteApproval(row.id)">
                      <el-button type="text" size="mini" slot="reference">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="content-footer">
        <el-pagination @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20,40,80,100,200]" :page-size="pageSize" background :layout="paginationLayout()" :total="total" class="el-pagination"></el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  import { portrait, autoOrientation, fullscreen } from "@/utils/rotatingScreen.js";
  import TableHeadFilter from "@/components/tableHeadFilter/index.vue";
  import { formatDate } from "@/utils/toosls";
  import { reqApprovalList,reqDelApproval } from "@/api/purchaseInventoryApproveProcess.js";
  import { closeBarheight,appBarheight, appTabBarControl } from "@/utils/jingzhi.js";
  export default {
    name:"pruchaseInventoryApproveProcess",  //采购入库审批流程
    components:{
      TableHeadFilter
    },
    data() {
      return {
        formData:{
          
        },
        tableData:[],
        currentPage:1,
        pageSize:20,
        total:0,
        tableLoading:false,
        exportBtnLoading:false,
        tableMaxHeight:450
      }
    },
    mounted(){
      this.getApprovalList();
      document.title = "采购入库审批流程";
      this.calculateTableMaxHeight();
      window.addEventListener("resize",this.calculateTableMaxHeight);
      //精致环境下进行自动旋转
      const isDevelopment = process.env.NODE_ENV === 'development';
      if(!isDevelopment){
        autoOrientation();
      }
    },
    beforeDestroy(){
      window.removeEventListener("resize",this.calculateTableMaxHeight);
    },
    methods:{
      getApprovalList(){
        const page = this.currentPage;
        const size = this.pageSize;
        const parameter = {page,size};
        this.tableLoading = true;
        reqApprovalList(parameter).then(response => {
          if(response.data.code === 200){
            this.tableData = response.data.data.content;
            this.total = response.data.data.totalElements;
          }
          console.log("分页获取审批列表api",response);
          this.tableLoading = false;
        }, error => {
          console.log("分页获取审批列表api",error);
          this.tableLoading = false;
        })
      },
      deleteApproval(approvalId){
        reqDelApproval(approvalId).then(response => {
          if(response.data.code === 200){
            this.$notify({title:"提示", message:"删除成功",type:"success",duration:2000});
            this.getApprovalList();
          }
          console.log('删除审批列表数据api',response);
        }, error => {
          this.$notify({title:"提示", message:"删除失败，请重试",type:"error",duration:2000});
          console.log('删除审批列表数据api',error);
        })
      },
      examineEvent(approvalId){
        this.$router.push({name:"PurchaseInventoryApproveProcessUpdate",query:{approvalId:approvalId,status:0}});
      },
      editEvent(approvalId){
        this.$router.push({name:"PurchaseInventoryApproveProcessUpdate",query:{approvalId:approvalId,status:1}});
      },
      handleCurrentChange(curPage){
        this.currentPage = curPage;
        this.getApprovalList();
      },
      handleSizeChange(pageSize){
        this.pageSize = pageSize;
        this.getApprovalList();
      },
      calculateTableMaxHeight(){
        const dom = document.querySelector(".table-main");
        this.$nextTick(() => {
          this.tableMaxHeight = dom.offsetHeight - 10;
        })
      },
      //格式化时间
      formatDate(val,type){
        let date = new Date(val);
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        let h = date.getHours();
        let m = date.getMinutes();
        let s = date.getSeconds();
        if(type === 0){
            return year + "-" + this.addZero(month) + "-" + this.addZero(day) + " " + this.addZero(h) + ":" + this.addZero(m) + ":" + this.addZero(s);
        } else if (type === 1){
            return year + "-" + this.addZero(month) + "-" + this.addZero(day);
        } else if (type === 2){
            return this.addZero(h) + ":" + this.addZero(m) + ":" + this.addZero(s);
        } else if (type === 3){
            return year + "-" + this.addZero(month) + "-" + this.addZero(day) + " 00:00:00";
        } else if (type === 4){
          return year + "年" + this.addZero(month) + "月" + this.addZero(day) + "日";
        } else if (type === 5){
          return year + "-" + this.addZero(month) + "-" + "01";
        } else if (type === 6){
          return year + "年" + this.addZero(month) + "月";
        }
      },
      addZero(val){
        return val > 9 ? val : "0" + val;
      },
      //tableHeadFiler的change事件
      filterChangeEvent(parameter){
        const { state, filterField, selectedValue } = parameter;
        if(state === 'clear'){
          //清空操作
          if(this.formData[filterField] !== ""){
            this.formData[filterField] = "";
            this.search_btn();
          }
        }
        if(state === 'confirm'){
          //确定操作
          this.formData[filterField] = selectedValue;
          if(selectedValue !== ""){
            this.search_btn();
          }
        }
      },
      addEvent(){
        this.$router.push({name:"PurchaseInventoryApproveProcessUpdate",query:{approvalId:null,status:2}});
      },
      //获取关闭按钮高度和通知栏高度
      async setContainerHeight(){
        const ch = await closeBarheight();
        const nh = await appBarheight();
      },
      paginationLayout(){
        const domWidth = document.documentElement.clientWidth;
        console.log('当前屏幕宽度:',domWidth);
        if(domWidth >= 300 && domWidth <= 600){
          return "prev, pager, next,total";
        }
        if(domWidth > 600){
          return "prev, pager, next,total, sizes, jumper";
        }
      }
    }
  }
  </script>
  
<style lang='scss' scoped>
.content{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1%;
  box-sizing: border-box;
  user-select: none;

  .content-head{
    flex: 0.5;
    .form-item{
      margin-right: 2vw;
    }
  }
  @media screen and (min-width:300px) and (max-width:600px) {
    .el-message-box{
        width:320px;
    }
    .content-head{
      padding-top:80px;
    }
  }


  .content-table{
    flex: 8;
    margin: 10px 0;
    .table-date{
      width: 100%;
      height: 2%;
      min-height: 15px;
      margin-bottom: 0.5%;
      display: flex;
      justify-content: right;
    }
    .table-main{
      width: 100%;
      height: 98%;
    }
  }
  .content-footer{
    flex: 0.5;
    display: flex;
    justify-content: flex-end;
    .el-pagination{
      white-space: normal !important;
    }
  }
  .status-item{
    display: flex;
    justify-content: center;
    align-items: center;
    .item-left-icon{
      width: 14px;
      height: 14px;
      margin-right: 5px;
      border-radius: 50%;
      border:1px solid #efefef;
      background: #9195a3;
    }
    .status0{
      background: #1890ff;
    }
    .status1{
      background: #03e2e2;
    }
    .status2{
      background: #008000;
    }
    .status3{
      background: #f00;
    }
    .status4{
      background: #000;
    }
    .item-right-text{
      font-size: 14px;
    }
  }
}
/*
::v-deep .el-table__header th {
  padding: 0;
}
::v-deep .el-table__row {
  margin-bottom: 15px;
}
::v-deep .el-table .el-table__cell{
  padding: 0;
}
*/
</style>